import echarts from 'echarts';
import { ReactInstance } from 'react';

interface IConfig {
  ref: ReactInstance,
  title?: string,
  titleColor?: string,
  list?: Array<string | number>,
  count: Array<{ value: number, name: string }>,
  colors: Array<string>,
  hiddenLeble?: boolean,
  series?: string,
  radius?: Array<string> | string
}


export function SingleTable(config: IConfig) {
  let option = {
    title: {
      text: config.title || '',
      left: 0,
      right: 0,
      bottom: 10,
      top: 10,
      containLabel: true,
      textStyle: {
        fontSize: 16,
        fontWeight: "300",
        color: config.titleColor || "#49a1ff"
      }
    },
    tooltip: null,
    legend: config.hiddenLeble ? null : {
      orient: "vertical",
      left: "right",
      data: config.count,
      textStyle: {
        fontSize: 14,
        fontWeight: "300",
        color: config.titleColor || "#49a1ff"
      }
    },
    series: [
      {
        name: config.series,
        type: "pie",
        radius: config.radius ? config.radius : "55%",
        center: ["50%", "50%"],
        data: config.count,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        label: {
          normal: {
            formatter: function (params) {
              let total = 0;
              config.count.forEach(function (value) {
                total += +value.value;
              });
              const percent = +total === 0 ? 0 : ((+params.value / +total) * 100).toFixed(1);
              return `${params.name} ${params.value}\n\r(${percent})%`;
            }
          }
        }
      }
    ],
    color: config.colors || []
  }
  const myChart = echarts.init(config.ref);
  
  myChart.setOption(option)
}
